<!-- 人气 -->
<template>
	<view>
		<view style="border-bottom:1rpx solid #f0f0f0;">
			<fui-tabs :tabs="pageTabs" :current="tabIndex" isSlider selectedColor="#000" sliderBackground="#FFDD00"
				:isTabCount="true" @change="changeTabs"></fui-tabs>
		</view>
		<view>
			<swiper :current="tabIndex" :duration="300" @change="tabChange" :style="{height:bodyHeight+'px'}">
				<swiper-item class="fui-swiper__item">
					<scroll-view scroll-y :style="{height:bodyHeight+'px'}">
						<view class="artistes" v-if="fangkeList.length != 0">
							<view class="artistesBox" v-for="(item,key) in fangkeList" :key="key">
								<view class="artInfos" @click="gotoArtiter(item.UserID)">
									<view class="artHeadPic">
										<head-wear :width="80" :height="80" :borderWidth="4" :userInfo="item"
											:WxHeadPic="item.WxHeadPic" :UserLevelID="item.UserLevelID" image-width="30"
											image-height="20" size="16" right="-7" bottom="0" oneRight="0"></head-wear>
									</view>
									<view class="artInfo">
										<view class="artName">
											<text class="one-ellipsis" style="display: block;">{{item.NickName}}</text>
											<image :src="baseUrl + 'icon/boy.png'" class="sex-image-size marginLeft-10"
												v-if="JSON.parse(item.UserSex).text === '男'"></image>
											<image :src="baseUrl + 'icon/girl.png'" class="sex-image-size marginLeft-10"
												v-if="JSON.parse(item.UserSex).text === '女'"></image>
											<auth-label v-if="item.isAuthOk == 2" :size="18" height="30"></auth-label>
											<personality-label v-if="item.BeautifulWomen == 1" :size="18"
												height="30"></personality-label>
											<image :src="baseUrl + 'icon/enterprise.png'"
												class="company-image-size marginLeft-10"
												v-if="item.isCompanyAuth && item.isCompanyAuth == 1"></image>
										</view>
										<view class="artLabel">
											<text>
												<text v-for="(roleitem,roleindex) in item.Roles" :key="roleindex">
													{{ roleitem.LabelName }}
													<text v-if="roleindex < item.Roles.length-1">，</text>
												</text>
											</text>
											<text class="geline"> | </text>
											<text class="artAddr">{{ item.UserCity }}</text>
										</view>
									</view>
									<view class="artState">
										<view class="fs-24" v-if="item.isOnline == 1">在线</view>
										<view class="fs-24" v-else>
											{{ $common.timeDiff(item.onlineTime,new Date()) }}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="row-center marginTop-50" v-else>
							<view class="">
								<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
								<view class="" style="text-align: center;">
									暂无访客
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="fui-swiper__item">
					<scroll-view scroll-y :style="{height:bodyHeight+'px'}">
						<view class="artistes" v-if="huozanList.length != 0">
							<view class="artistesBox" v-for="(item,key) in huozanList" :key="key"
								@click="gotoArtiter(item.UserID)">
								<view class="row-between">
									<view style="flex: 1;">
										<head-wear :width="100" :height="100" :borderWidth="4" :userInfo="item"
											:WxHeadPic="item.WxHeadPic" :UserLevelID="item.UserLevelID" image-width="30"
											image-height="20" size="16" right="-7" bottom="0" oneRight="0"></head-wear>
										<view style="float: left;">
											<view class="artName fs-28 marginLeft-20">
												<text class="one-ellipsis"
													style="display: block;max-width: 90%;">{{item.NickName}}</text>
												<image :src="baseUrl + 'icon/boy.png'"
													class="sex-image-size marginLeft-10"
													v-if="JSON.parse(item.UserSex).text === '男'"></image>
												<image :src="baseUrl + 'icon/girl.png'"
													class="sex-image-size marginLeft-10"
													v-if="JSON.parse(item.UserSex).text === '女'"></image>
												<auth-label v-if="item.isAuthOk == 2" :size="18"
													height="30"></auth-label>
												<personality-label v-if="item.BeautifulWomen == 1" :size="18"
													height="30"></personality-label>
												<image :src="baseUrl + 'icon/enterprise.png'"
													class="company-image-size marginLeft-10"
													v-if="item.isCompanyAuth && item.isCompanyAuth == 1"></image>
											</view>
											<view class="marginLeft-20 marginTop-10 fs-28" style="color: #7a7a7a;">
												赞了我的<text v-if="item.ActionType == 2">主页</text><text
													v-if="item.ActionType == 9">作品</text>
											</view>
											<view class="marginLeft-20 marginTop-10 fs-24" style="color: #999;">
												{{ $common.timeDiff(item.addTime),new Date() }}</view>
										</view>
									</view>
									<view class="">
										<image :src="item.ZanPic" class="borderR-10"
											style="width: 120rpx;height: 120rpx;" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="row-center marginTop-50" v-else>
							<view class="">
								<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
								<view class="text-align-center">
									暂无信息
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import AuthLabel from "@/components/authLabel.vue";
	import PersonalityLabel from "@/components/personalityLabel.vue";
	import HeadWear from "@/components/headwear.vue"
	export default {
		components: {
			AuthLabel,
			PersonalityLabel,
			HeadWear
		},
		data() {
			return {
				pageTabs: [{
						name: '访客',
						value: 0
					},
					{
						name: '获赞',
						value: 1
					}
				],
				tabIndex: 0,
				bodyHeight: 1000,
				fangkeList: [],
				huozanList: [],
				baseUrl: ''
			};
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
			let time = 80
			// #ifdef H5
			time = 200
			// #endif
			setTimeout(() => {
				this.bodyHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(200);
				// #ifdef MP
				// #endif
			}, time)

			this.loadData();
		},
		methods: {
			loadData() {
				this.$httpost('/UserCenter/fangke', {}).then(res => {
					this.fangkeList = res.data.fangkelist
					this.huozanList = res.data.huozanlist;
					this.pageTabs[0]['count'] = res.data.newFangkeCount;
					this.pageTabs[1]['count'] = res.data.newHuozanCount;
				});
			},
			changeTabs(e) {
				// console.log(e)
				this.switchTab(e.index)
			},
			tabChange(e) {
				// console.log(e)
				if (e.detail.source == 'touch') {
					let index = e.target.current || e.detail.current;
					this.switchTab(index);
				}
			},
			switchTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
			},
			gotoArtiter(artisterID) {
				uni.navigateTo({
					url: '/artistesPages/pages/artister?artisterID=' + artisterID
				})
			},
		}
	}
</script>

<style lang="scss">
	.artistes {
		padding: 10rpx
	}

	.artistesBox {
		margin-top: 10rpx;
		height: auto;
		background-color: #FFF;
		border-radius: 15rpx;
		padding: 26rpx;
		padding-bottom: 40rpx;
	}

	.artInfos {

		height: 60rpx;
	}

	.artHeadPic {
		position: relative;
		float: left;
		width: 80rpx;
		height: 80rpx;
		background-color: #CCC;
		background-position: center;
		background-size: cover;
		border-radius: 80rpx;
	}

	.artHeadPic image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}

	.artInfo {
		float: left;
		width: 60vw;
		margin-left: 20rpx;
	}

	.artName {
		font-size: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.artLabel {
		margin-top: 10rpx;
		font-size: 20rpx;
		color: #999;
		white-space: nowrap;
		max-width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.artState {
		width: 120rpx;
		float: right;
		text-align: right;
		color: #999
	}

	.geline {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.artAddr {}
</style>